M

MLOG

Latviešu

Izpētiet Next.js API maršrutus un atraisiet pilna cikla izstrādes iespējas savās React lietotnēs. Apgūstiet modeļus, labāko praksi un izvietošanas stratēģijas.

Next.js API Maršruti: Pilna cikla izstrādes modeļi

Next.js ir revolucionizējis React izstrādi, nodrošinot stabilu ietvaru veiktspējīgu un mērogojamu tīmekļa lietotņu izveidei. Viena no tā galvenajām iezīmēm ir API maršruti, kas ļauj izstrādātājiem izveidot aizmugursistēmas funkcionalitāti tieši Next.js projektos. Šī pieeja racionalizē izstrādi, vienkāršo izvietošanu un atver jaudīgas pilna cikla iespējas.

Kas ir Next.js API maršruti?

Next.js API maršruti ir serverless funkcijas, kas rakstītas tieši jūsu /pages/api direktorijā. Katrs fails šajā direktorijā kļūst par API galapunktu, automātiski maršrutējot HTTP pieprasījumus uz atbilstošo funkciju. Tas novērš nepieciešamību pēc atsevišķa aizmugursistēmas servera, vienkāršojot jūsu lietotnes arhitektūru un samazinot darbības izmaksas.

Uztveriet tos kā miniatūras serverless funkcijas, kas atrodas jūsu Next.js lietotnē. Tās reaģē uz HTTP pieprasījumiem, piemēram, GET, POST, PUT, DELETE, un var mijiedarboties ar datubāzēm, ārējām API un citiem servera puses resursiem. Būtiski, ka tās darbojas tikai serverī, nevis lietotāja pārlūkprogrammā, nodrošinot sensitīvu datu, piemēram, API atslēgu, drošību.

API maršrutu galvenās priekšrocības

Darba sākšana ar API maršrutiem

API maršruta izveide Next.js ir vienkārša. Vienkārši izveidojiet jaunu failu /pages/api direktorijā. Failu nosaukums noteiks maršruta ceļu. Piemēram, izveidojot failu ar nosaukumu /pages/api/hello.js, tiks izveidots API galapunkts, kas būs pieejams vietnē /api/hello.

Piemērs: Vienkāršs sveiciena API

Šeit ir vienkāršs API maršruta piemērs, kas atgriež JSON atbildi:


// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Sveiciens no Next.js API maršruta!' });
}

Šis kods definē asinhrono funkciju handler, kas saņem divus argumentus:

Funkcija iestata HTTP statusa kodu uz 200 (OK) un atgriež JSON atbildi ar ziņojumu.

Dažādu HTTP metožu apstrāde

Jūs varat apstrādāt dažādas HTTP metodes (GET, POST, PUT, DELETE utt.) savā API maršrutā, pārbaudot rekvizītu req.method. Tas ļauj jums viegli izveidot RESTful API.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Iegūt visus uzdevumus no datubāzes
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Izveidot jaunu uzdevumu
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Apstrādāt neatbalstītas metodes
    res.status(405).json({ message: 'Metode nav atļauta' });
  }
}

Šis piemērs parāda, kā apstrādāt GET un POST pieprasījumus hipotētiskam /api/todos galapunktam. Tas ietver arī kļūdu apstrādi neatbalstītām metodēm.

Pilna cikla izstrādes modeļi ar API maršrutiem

Next.js API maršruti nodrošina dažādus pilna cikla izstrādes modeļus. Šeit ir daži izplatīti lietošanas gadījumi:

1. Datu ielāde un manipulācija

API maršrutus var izmantot, lai ielādētu datus no datubāzēm, ārējām API vai citiem datu avotiem. Tos var izmantot arī datu manipulācijai, piemēram, ierakstu izveidei, atjaunināšanai vai dzēšanai.

Piemērs: Lietotāja datu ielāde no datubāzes


// pages/api/users/[id].js
import { query } from '../../../lib/db';

export default async function handler(req, res) {
  const { id } = req.query;

  try {
    const results = await query(
      'SELECT * FROM users WHERE id = ?',
      [id]
    );

    if (results.length === 0) {
      return res.status(404).json({ message: 'Lietotājs nav atrasts' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Iekšēja servera kļūda' });
  }
}

Šis piemērs ielādē lietotāja datus no datubāzes, pamatojoties uz lietotāja ID, kas norādīts URL. Tas izmanto datubāzes vaicājumu bibliotēku (pieņemts, ka tā atrodas lib/db), lai mijiedarbotos ar datubāzi. Ievērojiet parametrizētu vaicājumu izmantošanu, lai novērstu SQL injekcijas ievainojamību.

2. Autentifikācija un autorizācija

API maršrutus var izmantot, lai ieviestu autentifikācijas un autorizācijas loģiku. Varat tos izmantot, lai pārbaudītu lietotāju akreditācijas datus, ģenerētu JWT pilnvaras un aizsargātu sensitīvus resursus.

Piemērs: Lietotāja autentifikācija


// pages/api/login.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { query } from '../../lib/db';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    try {
      const results = await query(
        'SELECT * FROM users WHERE email = ?',
        [email]
      );

      if (results.length === 0) {
        return res.status(401).json({ message: 'Nederīgi akreditācijas dati' });
      }

      const user = results[0];

      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
        return res.status(401).json({ message: 'Nederīgi akreditācijas dati' });
      }

      const token = jwt.sign(
        { userId: user.id, email: user.email },
        process.env.JWT_SECRET,
        { expiresIn: '1h' }
      );

      res.status(200).json({ token });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Iekšēja servera kļūda' });
    }
  } else {
    res.status(405).json({ message: 'Metode nav atļauta' });
  }
}

Šis piemērs autentificē lietotājus, salīdzinot norādīto paroli ar datubāzē saglabāto jaukto paroli. Ja akreditācijas dati ir derīgi, tas ģenerē JWT pilnvaru un atgriež to klientam. Pēc tam klients var izmantot šo pilnvaru, lai autentificētu turpmākos pieprasījumus.

3. Veidlapu apstrāde un datu iesniegšana

API maršrutus var izmantot, lai apstrādātu veidlapu iesniegumus un apstrādātu no klienta nosūtītos datus. Tas ir noderīgi, lai izveidotu kontaktu veidlapas, reģistrācijas veidlapas un citus interaktīvus elementus.

Piemērs: Kontaktu veidlapas iesniegums


// pages/api/contact.js
import { sendEmail } from '../../lib/email';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    try {
      await sendEmail({
        to: 'admin@example.com',
        subject: 'Jauns kontaktu veidlapas iesniegums',
        text: `Vārds: ${name}\nE-pasts: ${email}\nZiņa: ${message}`,
      });

      res.status(200).json({ message: 'E-pasts veiksmīgi nosūtīts' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Neizdevās nosūtīt e-pastu' });
    }
  } else {
    res.status(405).json({ message: 'Metode nav atļauta' });
  }
}

Šis piemērs apstrādā kontaktu veidlapas iesniegumu, nosūtot e-pastu administratoram. Tas izmanto e-pasta sūtīšanas bibliotēku (pieņemts, ka tā atrodas lib/email), lai nosūtītu e-pastu. Jums jāaizstāj admin@example.com ar faktisko adresāta e-pasta adresi.

4. Webhooks un notikumu apstrāde

API maršrutus var izmantot, lai apstrādātu webhooks un reaģētu uz notikumiem no ārējiem pakalpojumiem. Tas ļauj integrēt savu Next.js lietotni ar citām platformām un automatizēt uzdevumus.

Piemērs: Stripe Webhook apstrāde


// pages/api/stripe-webhook.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false, // Atspējot noklusējuma body parsing
  },
};

async function buffer(req) {
  const chunks = [];
  for await (const chunk of req) {
    chunks.push(chunk);
  }
  return Buffer.concat(chunks).toString();
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const sig = req.headers['stripe-signature'];

    let event;

    try {
      const buf = await buffer(req);
      event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
    } catch (err) {
      console.log(`Webhook Error: ${err.message}`);
      res.status(400).send(`Webhook Error: ${err.message}`);
      return;
    }

    // Apstrādāt notikumu
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent for ${paymentIntent.amount} was successful!`);
        // Pēc tam definējiet un izsauciet metodi, lai apstrādātu veiksmīgu maksājuma nodomu.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Pēc tam definējiet un izsauciet metodi, lai apstrādātu veiksmīgu PaymentMethod pievienošanu.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // Neparedzēts notikuma veids
        console.log(`Neapstrādāts notikuma veids ${event.type}.`);
    }

    // Atgriezt 200 atbildi, lai apstiprinātu notikuma saņemšanu
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Metode nav atļauta');
  }
}

Šis piemērs apstrādā Stripe webhook, pārbaudot parakstu un apstrādājot notikuma datus. Tas atspējo noklusējuma body parser un izmanto pielāgotu buffer funkciju, lai lasītu neapstrādātu pieprasījuma body. Ir ļoti svarīgi atspējot noklusējuma body parser, jo Stripe paraksta pārbaudei ir nepieciešams neapstrādāts body. Atcerieties konfigurēt savu Stripe webhook galapunktu savā Stripe informācijas panelī un iestatīt vides mainīgo STRIPE_WEBHOOK_SECRET.

Labākā prakse API maršrutiem

Lai nodrošinātu savu API maršrutu kvalitāti un uzturēšanas spēju, ievērojiet šo labāko praksi:

1. Modularizējiet savu kodu

Neizvairieties rakstīt lielus, monolītus API maršrutus. Tā vietā sadaliet savu kodu mazākos, atkārtoti izmantojamos moduļos. Tas atvieglo koda sapratni, testēšanu un uzturēšanu.

2. Ieviest kļūdu apstrādi

Pareizi apstrādājiet kļūdas savos API maršrutos. Izmantojiet try...catch blokus, lai uztvertu izņēmumus un atgrieztu atbilstošas kļūdu atbildes klientam. Reģistrējiet kļūdas, lai palīdzētu atkļūdot un uzraudzīt.

3. Validējiet ievades datus

Vienmēr validējiet ievades datus no klienta, lai novērstu drošības ievainojamību un nodrošinātu datu integritāti. Izmantojiet validācijas bibliotēkas, piemēram, Joi vai Yup, lai definētu validācijas shēmas un nodrošinātu datu ierobežojumus.

4. Aizsargājiet sensitīvus datus

Glabājiet sensitīvus datus, piemēram, API atslēgas un datubāzes akreditācijas datus, vides mainīgajos. Nekad nepievienojiet sensitīvus datus savam koda repozitorijam.

5. Ieviest ātruma ierobežošanu

Aizsargājiet savus API maršrutus no ļaunprātīgas izmantošanas, ieviešot ātruma ierobežošanu. Tas ierobežo pieprasījumu skaitu, ko klients var veikt noteiktā laika periodā. Izmantojiet ātruma ierobežošanas bibliotēkas, piemēram, express-rate-limit vai limiter.

6. Nodrošiniet API atslēgas

Neatklājiet API atslēgas tieši klienta puses kodā. Vienmēr proxy pieprasījumus, izmantojot savus API maršrutus, lai aizsargātu savas API atslēgas no neatļautas piekļuves. Droši glabājiet API atslēgas vides mainīgajos savā serverī.

7. Izmantojiet vides mainīgos

Neizvairieties no konfigurācijas vērtību iekļaušanas kodā. Tā vietā izmantojiet vides mainīgos, lai glabātu konfigurācijas iestatījumus. Tas atvieglo lietotnes pārvaldību dažādās vidēs (izstrādes, testēšanas, ražošanas).

8. Reģistrēšana un uzraudzība

Ieviest reģistrēšanu un uzraudzību, lai izsekotu savu API maršrutu veiktspēju. Reģistrējiet svarīgus notikumus, piemēram, kļūdas, brīdinājumus un veiksmīgus pieprasījumus. Izmantojiet uzraudzības rīkus, lai izsekotu tādus rādītājus kā pieprasījuma latentums, kļūdu līmenis un resursu izmantošana. Pakalpojumi, piemēram, Sentry, Datadog vai New Relic, var būt noderīgi.

Izvietošanas apsvērumi

Next.js API maršruti ir paredzēti izvietošanai serverless platformās. Populāras izvietošanas iespējas ietver:

Izvietojot savu Next.js lietotni ar API maršrutiem, pārliecinieties, vai jūsu vides mainīgie ir pareizi konfigurēti izvietošanas platformā. Apsveriet arī serverless funkciju aukstās palaišanas laiku, kas var ietekmēt jūsu API maršrutu sākotnējo atbildes laiku. Koda optimizēšana un tādu metožu izmantošana kā nodrošināta vienlaicība var palīdzēt mazināt aukstās palaišanas problēmas.

Secinājums

Next.js API maršruti nodrošina jaudīgu un ērtu veidu, kā izveidot pilna cikla lietotnes ar React. Izmantojot serverless funkcijas, varat vienkāršot izstrādi, samazināt darbības izmaksas un uzlabot lietotnes veiktspēju. Ievērojot šajā rakstā norādīto labāko praksi, varat izveidot robustus un uzturējamus API maršrutus, kas nodrošina jūsu Next.js lietotnes.

Neatkarīgi no tā, vai veidojat vienkāršu kontaktu veidlapu vai sarežģītu e-komercijas platformu, Next.js API maršruti var palīdzēt racionalizēt izstrādes procesu un nodrošināt izcilu lietotāja pieredzi.

Turpmākā apmācība